<template>
  <!-- 跟踪池.vue -->
  <div>
    <div v-if="showLoading" class="box-center">
      <atom-loading />
    </div>
    <template v-else>
      <div v-if="hasTrackPool" class="list">
        <div class="selected-pool">
          <!-- 日期 -->
          <div :class="`calendar ${renewalDate.length ? 'has-renewal' : ''}`" v-if="showDatePick">
          <atom-sticky offset-top="12.8vw">
            <atom-calendar-tab
              :value="defaultDate"
              @input="changeDefaultDate"
              :min-date="minDate"
              :max-date="maxDate"
              :weekFormatter="weekFormatter"
              :filter="filterDate"
              @click-calendar="show"
            >
            </atom-calendar-tab>
          </atom-sticky>
            <atom-calendar
              v-model="showCalendar"
              :min-date="minDate"
              :max-date="maxDate"
              :default-date="defaultDate"
              :formatter="formatter"
              :effect-date-rule="filterCalendar"
              @confirm="confirm"
            >
            </atom-calendar>
          </div>
          <HoldingList
            :activeDate="activeDate"
            :activeStock="activeStock"
            :isTrackPool="true"
            :stockList="stockList"
            :cardList="cardList"
            offsetTool="29.33vw"
            offsetList="42.66vw"
            @modeChange="onModeChange"
            @goToShowCustom="showCustom = true"
          ></HoldingList>
          <div @click="showHolding" class="btn" v-if="dataList.length">
            持仓记录<svg-icon icon="arrow-right"></svg-icon>
          </div>
        </div>
      </div>
      <empty-pool v-else :isTrackingPool="true" @goCustomize="goCustomize"></empty-pool>
    </template>
    <atom-popup v-model="showCustom" round position="bottom" :close-on-click-overlay="false" get-container="body">
      <TrackingPoolCustom
        :strategys="strategys"
        :trackingPoolCustomData="trackingPoolCustomData"
        :needSub="needSub"
        @show="showCustom = true"
        @hidden="showCustom = false"
        @openSubPopup="$emit('openSubPopup')"
        @updateTrackPoolData="getTrackPoolStatus"
        @closePopup="showCustom = false"
      />
    </atom-popup>
  </div>
</template>

<script>
import { reqBuyStrategy } from '@/apis/pool.api';
import mixins from '@/views/detail/mixins';
import { BASE_URL } from '@/config/pool';
import HoldingList from '@/components/detail/HoldingList.vue';
import EmptyPool from '@/components/detail/EmptyPool.vue';
import TrackingPoolCustom from '@/components/detail/trackingPoolCustom/Index.vue';
import tools from '@/lib/tools';

export default {
  mixins: [mixins],
  components: {
    HoldingList,
    EmptyPool,
    TrackingPoolCustom,
  },
  props: {
    showTackpoolPop: {
      type: Boolean,
      default: false,
    }
  },
  data() {
    return {
      // 列表卡片模式，默认列表
      currentMode: 0,
      hasTrackPool: false,
      showCustom: false,
      trackingPoolCustomData: {
        dayBuyLimit: 1,
        weekBuyLimit: 1,
        accountBuyLimit: 1,
        sortStrateyId: 0,
      },
      strategys: {},
      needSub: false,
      activeDate: window.getParam('addData'),
      activeStock: window.getParam('stockCode'),
    };
  },
  async created() {
    const renewwadDay = window.getParam('addData');
    if (renewwadDay) {
      this.renewalDate.push(tools.getMidnightTimestamp(new Date(renewwadDay)));
    }
    this.showLoading = true;
    await this.getTrackPoolStatus();
    if (window.getParam('tab') === '2' && !this.hasTrackPool) {
      this.needSub = true;
      this.showCustom = true;
    }
    const gpcId = window.getParam('gpc_id');
    if (gpcId) {
      const list = await this.getTackPool(gpcId);
      if (!list.length) {
        this.dataList = [];
        this.showLoading = false;
        return;
      }
      await this.handleDataList(list);
      await this.getSignalList();
      this.getValidDate();
    } else {
      this.dataList = [];
    }
    this.showLoading = false;
  },
  methods: {
    // 列表卡片模式切换
    onModeChange(mode) {
      this.currentMode = mode;
    },
    goCustomize() {
      this.needSub = true;
      this.showCustom = true;
    },
    showHolding() {
      location.href = `${BASE_URL}holding?gpc_id=${window.getParam('gpc_id')}&isTrackPool=1&product=${window.getParam('product')}&mode=${this.currentMode}`;
    },
    async getTrackPoolStatus() {
      try {
        const res = await reqBuyStrategy({ gpc_id: window.getParam('gpc_id'), gpc_type: 1 });
        if (res.status_code === 0 && res.data) {
          const {
            exist,
            day_buy_limit,
            week_buy_limit,
            account_buy_limit,
            sort_strategy: { id },
            risk_strategy,
            pick_strategy,
            buy_strategy,
            sell_strategy,
            stop_profit_strategy,
            stop_loss_strategy,
          } = res.data;
          this.hasTrackPool = exist;
          const initDayBuyLimit = 2;
          const initWeekBuyLimit = 5;
          const initAccountBuyLimit = 10;
          // 已定制以接口返回为准,未定制取接口和默认值中最小
          if (exist) {
            this.trackingPoolCustomData = {
              dayBuyLimit: day_buy_limit,
              weekBuyLimit: week_buy_limit,
              accountBuyLimit: account_buy_limit,
              sortStrateyId: id,
            };
          } else {
            this.trackingPoolCustomData = {
              dayBuyLimit: Math.min(day_buy_limit, initDayBuyLimit),
              weekBuyLimit: Math.min(week_buy_limit, initWeekBuyLimit),
              accountBuyLimit: Math.min(account_buy_limit, initAccountBuyLimit),
              sortStrateyId: id,
            };
          }
          this.strategys = {
            risk_strategy,
            pick_strategy,
            buy_strategy,
            sell_strategy,
            stop_profit_strategy,
            stop_loss_strategy,
          };
        } else {
          this.hasTrackPool = false;
        }
      } catch (err) {
        this.hasTrackPool = false;
      }
    },
  },
  watch: {
    showTackpoolPop(val) {
      if (val) {
        this.goCustomize();
        this.$emit('hasShow');
      }
    }
  },
};
</script>

<style lang="less" scoped>
/deep/.renewal-day .atom-calendar__top-info {
  color: #ff2436;
}
// .has-renewal /deep/.atom-calendar-tab__icon-wrapper {
//   position: relative;
//   &::before {
//     position: absolute;
//     .bg-mixins;
//     content: '';
//     background-image: url('../../assets/images/renewal.png');
//     width: 26px;
//     height: 14px;
//     z-index: 11;
//     right: -10px;
//   }
// }
.list {
  min-height: 310px;
  height: auto;
  position: relative;
}

.box-center {
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.atom-calendar-tab {
  width: 100%;
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 18px;
  color: var(--text-3);
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
</style>
